<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../plugins/echarts/echarts.js"></script>

</head>
<body>

<div id="test" style="height: 600px"></div>

</body>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('test'));

    // 指定图表的配置项和数据
    //发送ajax请求获取动态数据
    axios.get("/report/getMemberReportByAgeAndSex.do").then((res)=>{
        myChart.setOption({
            title : {
                text: '用户性别、年龄占比',
                subtext: '',
                x:'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                // data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
                data: res.data.data.name
            },
            series: [
                {
                    name: '性别占比',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],

                    label: {
                        position: 'inner'
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: res.data.data[4].male, name: '男', selected: true},
                        {value: res.data.data[5].female, name: '女'}
                    ]
                },
                {
                    name: '年龄占比',
                    type: 'pie',
                    radius: ['40%', '55%'],
                    label: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        // shadowBlur:3,
                        // shadowOffsetX: 2,
                        // shadowOffsetY: 2,
                        // shadowColor: '#999',
                        // padding: [0, 7],
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            // abg: {
                            //     backgroundColor: '#333',
                            //     width: '100%',
                            //     align: 'right',
                            //     height: 22,
                            //     borderRadius: [4, 4, 0, 0]
                            // },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    },
                    data: [
                        res.data.data[0],
                        res.data.data[1],
                        res.data.data[2],
                        res.data.data[3]
                        // {value: 335, name: '直达'},
                        // {value: 310, name: '邮件营销'},
                        // {value: 234, name: '联盟广告'},
                        // {value: 135, name: '视频广告'},
                        // {value: 1048, name: '百度'},
                        // {value: 251, name: '谷歌'},
                        // {value: 147, name: '必应'},
                        // {value: 102, name: '其他'}
                    ]
                }
            ]
        });
    });
</script>
</html>